<!--课题阶段管理-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-container-item">
          <div class="item-name">课程分类名称：{{mes.subCategoryName}}</div>
      </div>
      <div class="search-button color-primary width90" @click="addData">
          <span>新增阶段</span>
      </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
        <el-table-column prop="roleName" label="课题分类阶段名称设置" align="center" min-width="300">
          <template slot-scope="scope">
            <el-input v-model="scope.row.scsName" style="width: 230px;"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="300">
          <div class="btn-css" slot-scope="scope">
            <span class="small-btn btn3" @click="deleteInfo(scope.row)">
                <img src="../../../assets/assessment/icon-delete.png"> 删除
            </span>
            <span  v-if="scope.row.scsId" class="small-btn color-yellow" @click="lcBtn(scope.row)">
                <img src="../../../assets/assessment/icon-set-red.png"> 流程管理
            </span>
            <span  v-if="scope.row.scsId"  class="small-btn color2 btn2" @click="clBtn(scope.row)">
                <img src="../../../assets/assessment/icon-set-yellow.png"> 材料管理
            </span>
          </div>
        </el-table-column>
      </el-table>
      <div class="button-group">
        <div class="" @click="saveType">保存</div>
        <div class="" @click="cancelBtn">取消</div>
      </div>
    </div>
    <!-- 流程管理 -->
    <el-dialog title="流程管理" :visible.sync="dialogLC" :close-on-click-modal="false" width="50%">
      <div class="containerLC">
        <div class="item-name">当前阶段：{{lcInfo.scsName}} <img v-if="dataLC.length==0" src="../../../assets/classHours/icon-addBig.png" @click="addLC"></div>
        <div class="lc-list" v-if="dataLC.length!==0">
            <div class="lc-item" v-for="(item,index) in dataLC" :key="item.id?item.id:item.time">
                <div>
                    <span>流程{{index+1}}</span>
                    <el-input class="width230" v-model="item.scsFlowName"></el-input>
                    <img src="../../../assets/classHours/icon-addBig.png" @click="addLC" v-show="index+1 == dataLC.length">
                    <img src="../../../assets/assessment/icon-delete.png" @click="deleteLC(item)">
                </div>
            </div>
        </div>
      </div>
      <div class="button-group" slot="footer" style="margin-top:0">
          <div class="" @click="saveLC">保存</div>
          <div class="" @click="dialogLC=false">取消</div>
        </div>
    </el-dialog>
    <el-dialog title="材料表管理" :visible.sync="dialogCL" :close-on-click-modal="false" width="80%">
        <div class="cl-list">
            <div class="search-container">
                <div class="search-container-item">
                    <div class="item-name right20">课程分类名称：{{typeName}}</div>
                    <div class="item-name">分类课程所属阶段：{{jdName}}</div>
                </div>
                <el-upload :action="requestUrl" :show-file-list="false" accept=".xls,.xlsx" multiple
                  :http-request="upLoadApi" :on-change="fileInfo">
                  <div class="search-button color-yellow width90" style="margin-right:0">
                      <img src="../../../assets/assessment/bk-export.png">
                      <span>上传模板</span>
                  </div>
                </el-upload>
            </div>
            <div class="table-container table-css">
                <el-table :data="dataCL" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
                    <el-table-column prop="roleName" label="所需表" align="center" min-width="300">
                        <div slot-scope="scope" class="imgCL">
                            {{scope.row.resourceOriginalName}} <img src="../../../assets/assessment/icon-delete.png" @click="deleteCL(scope.row)">
                        </div>
                    </el-table-column>
                    <el-table-column label="表单命名" align="center" min-width="300">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.resourceName" style="width: 230px;"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="button-group" slot="footer" style="margin-top:0">
          <div class="" @click="saveCL">保存</div>
          <div class="" @click="dialogCL=false">取消</div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import {jdList,jdSave,lcList,lcSave,clList,clSave,queryclList} from "@/api/teachingTopic";
import Axios from 'axios'

export default {
  data() {
    return {
      dialogAdd:false,
      dialogLC:false,//流程管理
      dataLC:[],
      dialogCL:false,//材料表管理
      dataCL:[],
      addForm:{},
      tableData: [],
      mes:{},
      lcInfo:{},
      clInfo:{},
      typeName:'',
      jdName:''
    };
  },
  mounted(){
    this.mes = this.$route.query.row
    this.initList();
  },
  methods: {
    addData(){
      this.tableData.push({
        scsName:'',
        time:new Date().getTime()
      })
    },
    async initList(){
      let res = await jdList({subCategoryId:this.$route.query.row.subCategoryId});
      if(res.code == 200){
        this.tableData = res.data;
      }
    },
    //初始化流程表格
    async initListLc(){
      let res = await lcList({stageId:this.lcInfo.scsId});
      if(res.code == 200){
        this.dataLC = res.data;
      }
    },
    addLC(){
      this.dataLC.push({
          scsFlowName:'',
          time:new Date().getTime()
      })
    },
    deleteLC(row){
        if(row.scsFlowId) this.dataLC = this.dataLC.filter(item=>row.scsFlowId !== item.scsFlowId)
        if(row.time) this.dataLC = this.dataLC.filter(item=>row.time !== item.time)
    },
    async saveLC(){
      let mes = this.dataLC.map((item,index)=>{
        let nes = {
          scsFlowId:item.scsFlowId?item.scsFlowId:'',
          scsFlowName:item.scsFlowName,
          scsFlowOrder:index+1,
          scsId:this.lcInfo.scsId,
          subCategoryId:this.mes.subCategoryId
        }
        return nes;
      })
      let params = {
        stageId:this.lcInfo.scsId,
        subCategoryId:this.mes.subCategoryId,
        updateFlowList:mes
      }
      let res = await lcSave(params);
      if(res.code == 200){
        this.dialogLC = false;
        this.initList()
      }
    },
    async initListCl(){
      let res = await clList({stageId:this.clInfo.scsId});
      if(res.code == 200){
        this.dataCL = res.data
      }
    },
    clBtn(row){
      this.clInfo = row
      this.dialogCL = true;
      this.initListCl()
      this.initInfo()
    },
    // 获取名称
    async initInfo(){
      let res = await queryclList({subCategoryId:this.mes.subCategoryId,scsId:this.clInfo.scsId});
      this.typeName = res.data.subCategoryName
      this.jdName = res.data.scsName
    },
    upLoadApi(item){
      let formData = new FormData();
      formData.append('file', item.file);
      let requestUrl = this.$store.state.studentUrl.baseUrl+'/file/upload'
      Axios.post(requestUrl,formData).then(res => {
        if(res.data.success){
            this.dataCL.push({
              resourceOriginalName:item.name,
              resourceOriginalUrl:res.data.data.fileUri,
              time:new Date().getTime()
            })
          this.windowVisible = false;
        }
      })
    },
    async saveCL(){
      console.log(this.dataCL)
      let mes = this.dataCL.map(item=>{
        let nes = {
          resourceId:item.resourceId?item.resourceId:'',
          resourceName:item.resourceName,
          resourceOriginalName:item.resourceOriginalName,
          resourceOriginalUrl:item.resourceOriginalUrl,
          scsId:this.clInfo.scsId,
          subCategoryId:this.mes.subCategoryId
        }
        return nes;
      })
      let params = {
        stageId:this.clInfo.scsId,
        subCategoryId:this.mes.subCategoryId,
        updateResourceList:mes,
      }
      let res = await clSave(params);
      if(res.code == 200){
        this.dialogCL = false;
        this.initList()
      }
    },
    deleteCL(row){
        if(row.resourceId) this.dataCL = this.dataCL.filter(item=>row.resourceId !== item.resourceId)
        if(row.time) this.dataCL = this.dataCL.filter(item=>row.time !== item.time)
    },
    
    //流程
    lcBtn(row){
      this.dialogLC = true;
      this.lcInfo = row;
      this.initListLc()
    },
    addType(){
        this.dialogAdd = true;
    },
    deleteInfo(row){
        if(row.scsId) this.tableData = this.tableData.filter(item=>item.scsId !== row.scsId)
        if(row.time) this.tableData = this.tableData.filter(item=>item.time !== row.time)
    },
    async saveType(){
      let list = this.tableData.map((item,index)=>{
        let nes = {
          scsId:item.scsId?item.scsId:'',
          scsName:item.scsName,
          scsOrder:index+1,
          subCategoryId:this.mes.subCategoryId
        }
        return nes
      })
      let params = {
        subCategoryId:this.mes.subCategoryId,
        updateStageList:list
      }
      let res = await jdSave(params);
      if(res.code == 200){
        this.$router.push({
          path:'/teachingTopics/topicType/list'
        })
      }
    },
    fileInfo(file){
      if(file.name.indexOf("xls") == -1){
          this.$message.error('请上传excl文件');
      }
    },
    cancelBtn(){
      this.$router.push({
        path:'/teachingTopics/topicType/list'
      })
    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }
  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.right20{margin-right: 20px;}
.width90{width: 90px;}
.search-container {
  justify-content: space-between !important;
}
.color2{
 background: #FFF6EF;
 border: 1px solid #F3B815;
  color: #F3B815;
  >img{width: 17px!important;height:17px!important}
}
.color-yellow{
    width: 110px;
    background: #FEF1E8;
    border: 1px solid #F86900;
    color: #F86900;
    margin-right: 35px;
}
.btn-css{
  display: flex;
  .btn2{width: 110px;}
  .btn3{
        background: #FFEFEF;
        border: 1px solid #FF3819;
        color:#FF3819;
    }
}
 /deep/.button-group{
    padding-bottom: 20px;
    margin-top: 50px;
  }
  .item-name{
    display: flex;
    align-items: center;
    img{
        width: 15px;
        height: 15px;
        margin-left: 10px;
        cursor: pointer;
    }
  }
  .containerLC{
    width: 80%;
    margin: 0 auto;
    .lc-list{
        border: 1px solid #004CA7;
        width: 100%;
        margin-top: 10px;
        border-radius: 4px;
        .lc-item{
            padding: 26px 0 29px;
            border-bottom: 1px solid rgba(0,76,167,0.39) ;
            div:nth-child(1){
                display: flex;
                align-items: center;
                width: 74%;
                margin: 0 auto;
            }
            .width230{width: 230px;}
            img{
                width: 19px;
                height: 19px;
                margin-left: 10px;
            }
            span{
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                line-height: 0px;
                color: #004CA7;
                margin-right: 25px;
                &:nth-child(1){
                    width: 70px;
                    text-align: right;
                }
            }
            &:last-child{border-bottom: none;}
        }
    }
  }
  .cl-list{
    width: 80%;
    margin: 0 auto;
    .imgCL{
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            width: 20px;
            height: 20px;
            margin-left: 20px;
        }
    }
  }
</style>
